<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>登录 - 人力资源管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .login-container {
            max-width: 400px;
            margin: 100px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 5px;
        }
        .message-box {
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
            display: none;
        }
        .error-message {
            background-color: #f8d7da;
            border: 1px solid #f5c2c7;
            color: #842029;
        }
        .success-message {
            background-color: #d1e7dd;
            border: 1px solid #badbcc;
            color: #0f5132;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-container">
            <h2 class="text-center mb-4">人力资源管理系统</h2>

            <!-- 显示消息提示框 -->
            <c:if test="${not empty message}">
                <div class="message-box ${success ? 'success-message' : 'error-message'}" style="display: block;">
                    <i class="bi ${success ? 'bi-check-circle' : 'bi-exclamation-triangle'}"></i>
                    ${message}
                </div>
            </c:if>

            <form action="${pageContext.request.contextPath}/auth/login" method="post">
                <div class="mb-3">
                    <label for="empId" class="form-label">员工编号</label>
                    <input type="text" class="form-control" id="empId" name="empId" required
                           placeholder="请输入员工编号">
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" required
                           placeholder="请输入密码">
                </div>
                <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <script>
        // 如果有消息显示，3秒后自动隐藏
        document.addEventListener('DOMContentLoaded', function() {
            var messageBox = document.querySelector('.message-box');
            if (messageBox) {
                setTimeout(function() {
                    messageBox.style.opacity = '0';
                    messageBox.style.transition = 'opacity 0.5s ease';
                    setTimeout(function() {
                        messageBox.style.display = 'none';
                    }, 500);
                }, 3000);
            }
        });
    </script>
</body>
</html>
